<script>
export default {
  name: "personnelInformationCard",
  props: {
    info: {
      type: Object,
      default: () => {
        return {
          name: '父亲'
        }
      }
    },
    isOwnFlag: {
      type: Boolean,
      default: false
    },
    addPersonnelInfo: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  methods: {
    addMember() {
      this.$emit('addMember', this.info)
    }
  },
}
</script>

<template>
  <view class="personnelInformationCard flex flex-column align-center" :style="{
  background: isOwnFlag ? '#6EA0FC' : info.sex == 1 ? '#6EA0FC' : '#FC6F6F'
}" :class="{
  cardClass:isOwnFlag,
  'items-center':isOwnFlag,
  'justify-center':isOwnFlag
}" @click.stop="addMember()">
    <template v-if="isOwnFlag">
      <view class="title">为</view>
      <view class="name">{{ addPersonnelInfo.surname }}{{ addPersonnelInfo.name }}</view>
      <view class="title">添加</view>
    </template>
    <template v-else>
      <view class="avatar">
        <image :src="info.head"></image>
      </view>
      <view class="remark mt_10">
        {{ info.surname || '' }}{{ info.name || '' }}
      </view>
    </template>
  </view>
</template>

<style scoped lang="scss">

.cardClass {
  width: 117rpx !important;
  height: 220rpx !important;
  background: #6EA0FC !important;
  border-radius: 15rpx 15rpx 15rpx 15rpx !important;
  overflow: hidden;
}

.personnelInformationCard {
  width: 86rpx;
  height: 150rpx;
  background: #FC6F6F;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  overflow: hidden;
}

.title {
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 30rpx;
  color: #FFFFFF;
}

.name {
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 26rpx;
  color: #FFFFFF;
}

.avatar {
  width: 86rpx;
  height: 86rpx;
  background: #FFFFFF;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  overflow: hidden;

  image {
    width: 86rpx;
    height: 86rpx;
  }
}

.remark {
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 32rpx;
  color: #FFFFFF;
}
</style>